<template>
	<view class="content">
		<view class="tankuang" v-if="isTouming">
			<view class="box">
				<image
					src="../../../static/guanbi.png"
					mode=""
					class="image"
					@click="isTouming = false"
				></image>
				<text class="text">{{ bulletInfo.name }}</text>
				<view class="info1">
					<image src="../../../static/ss2.png" mode=""></image>
					<text>
						{{ bulletInfo.phone == null ? '' : bulletInfo.phone }}
					</text>
				</view>
				<view class="info1">
					<image src="../../../static/ss3.png" mode=""></image>
					<text>{{ bulletInfo.site }}</text>
				</view>
				<view class="info1">
					<image src="../../../static/ss1.png" mode=""></image>
					<text>
						{{
							bulletInfo.site_time == null
								? ''
								: bulletInfo.site_time
						}}
					</text>
				</view>
			</view>
		</view>

		<view class="popularityRanking">
			<text @click="show = true">{{ paixu }}</text>
			<image src="../../../static/paixu.png" mode=""></image>
			<text @click="show1 = true">附近</text>
			<image src="../../../static/paixu.png" mode=""></image>
		</view>
		<view v-for="(item, index) in data.info" :key="index">
			<view class="shop">
				<view class="info">
					<view class="top1">
						<view class="left" @click="storeIntroduction(item.id)">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="right">
							<view class="right1">
								<view
									class=""
									@click="storeIntroduction(item.id)"
								>
									{{ item.name }}
								</view>
								<image
									src="../../../static/zhu111.png"
									mode=""
									@click="getLocationBulletBox(item.id)"
								></image>
							</view>
							<view class="right2">
								<text @click="storeIntroduction(item.id)">
									已售{{ item.sold }}
								</text>
								<text @click="storeIntroduction(item.id)">
									人均￥{{ item.price }}/人
								</text>
								<!-- <text @click="storeIntroduction(item.id)">
									点评:{{ item.review }}
								</text> -->
							</view>
							<view class="right3">
								<text @click="storeIntroduction(item.id)">
									{{ item.type }}
								</text>
								<text
									@click="storeIntroduction(item.id)"
									class="text"
								>
									{{ item.site }}
								</text>
								<text @click="storeIntroduction(item.id)">
									{{ item.distance }}
								</text>
							</view>
							<view class="right4">
								<text
									@click="storeIntroduction(item.id)"
									class="text"
								>
									{{ item.free }}
								</text>
								<!-- 	<text @click="huodng()">5折</text> -->
								<!-- <text
									@click="confirmBuyOrdr(item.id)"
									class="text1"
								>
									买单
								</text> -->
							</view>
							<view class="right5">
								<view class="view">
									<text>
										当前为{{ item.num }}/{{ item.full }}单:
									</text>
									<bolck
										v-for="(item2, index2) in item.full + 1"
										:key="index2"
									>
										<image
											src="../../../static/mmm2.png"
											mode=""
											v-if="index2 < item.num"
										></image>

										<image
											src="../../../static/caise2.png"
											mode=""
											v-else-if="
												index2 === item.full &&
													item.num < item.full
											"
										></image>
										<image
											src="../../../static/caise333.png"
											mode=""
											v-else-if="
												index2 === item.full &&
													item.num === item.full
											"
										></image>
										<image
											src="../../../static/mmm1.png"
											mode=""
											v-else
										></image>
									</bolck>
								</view>
								<view class="view1">
									<text @click="confirmBuyOrdr(item.id)">
										买单
									</text>
								</view>
							</view>
						</view>
					</view>
					<view class="button">
						<view class="name">餐厅环境</view>
						<view class="shuxian"></view>

						<view class="showPictures">
							<view
								v-for="(item1, index1) in item.atlas"
								:key="index1"
							>
								<image
									:src="item1"
									mode=""
									style="margin-top: 15rpx;"
								></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
		<u-select
			v-model="show"
			:list="list"
			@confirm="confirm"
			safe-area-inset-bottom
		></u-select>
		<u-select
			v-model="show1"
			:list="list1"
			mode="mutil-column-auto"
			safe-area-inset-bottom
			@confirm="confirm1"
		></u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			paixu: '人气排序',

			page: 0,
			status: 'nomore',
			limit: 0,

			bulletInfo: {},
			uid: '',
			data: {},
			code: '',
			isTouming: false,
			//shrink: 0, // 手机号码
			content: 555,
			modalName: 'RadioModal',
			index1: 0,
			show: false,
			is_sort: 0, // 筛选条件
			space: 0, // 距离条件
			longitude: '',
			latitude: '',
			userLocation: '',
			//info: [],
			openID: '',
			list: [
				{
					value: '1',
					label: '人气排序'
				},
				{
					value: '2',
					label: '销量优先'
				},
				{
					value: '3',
					label: '低价优先'
				},
				{
					value: '4',
					label: '高价优先'
				}
			],
			show1: false,
			list1: [
				{
					value: 31,
					label: '全部',
					children: [{ value: 0, label: '全部' }]
				},
				{
					value: 1,
					label: '附近',
					children: [
						{
							value: 5,
							label: '500'
						},
						{
							value: 3,
							label: '1000'
						},
						{
							value: 4,
							label: '2000'
						},
						{
							value: 5,
							label: '3000'
						},
						{
							value: 6,
							label: '5000'
						},
						{
							value: 7,
							label: '8000'
						},
						{
							value: 9,
							label: '10000'
						}
					]
				}
			]
		};
	},
	methods: {
		//

		//跳转门店介绍//
		storeIntroduction(id) {
			uni.navigateTo({
				url: '../introduction/introduction?id=' + id
			});
		},
		// 分享
		shareIt() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 1,
				summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		// 确认买单
		confirmBuyOrdr(id) {
			uni.navigateTo({
				url: '../details/details?sid=' + id
			});
		},
		// 排序2
		confirm1(e) {
			console.log('e 11:>> ', e);
			this.space = e[1].label;
			console.log('this.space :>> ', this.space);
			this.modifyInfo();
		},
		// 排序1
		confirm(e) {
			this.is_sort = e[0].value;

			this.modifyInfo();
			this.paixu = e[0].label;
		},
		// 跳转活动
		huodng() {
			uni.navigateTo({
				url: '../activity/activity'
			});
		},
		getList(i) {
			console.log('i: ', i);
			this.index1 = i;
			console.log('this.index1: ', this.index1);
		},
		//修改和入驻申请

		modifyInfo() {
			const uid = uni.getStorageSync('uid');
			console.log('uid :>> ', uid);
			console.log('this.is_sort :>> ', this.is_sort);
			console.log('this.space :>> ', this.space);
			console.log('this.userLocation :>> ', this.userLocation);
			this.$u
				.post('api/users/user_index', {
					uid: this.uid,
					is_sort: this.is_sort,
					space: this.space,
					long: this.userLocation
				})
				.then(res => {
					console.log('res@@@@@@@@@ :>> ', res);
					this.data = res.data;
					console.log('this.data :>> ', this.data);
					this.$forceUpdate();
				});
		},
		//获取位置弹框
		async getLocationBulletBox(sid) {
			this.isTouming = true;
			const { data: res } = await this.$u.post('api/shop/shop_site', {
				sid: sid
			});
			this.bulletInfo = res;
			console.log('this.bulletInfo >>  ', this.bulletInfo);
		}
	},

	onLoad() {
		var that = this;

		//

		try {
			const userLocation = uni.getStorageSync('userLocation');
			if (userLocation) {
				this.userLocation = userLocation;
			}
		} catch (e) {
			// error
		}
		try {
			const uid = uni.getStorageSync('uid');
			if (!uid) {
				uni.redirectTo({
					url: '../login/login'
				});
			} else {
				this.uid = uid;
			}
		} catch (e) {
			// error
		}

		this.modifyInfo();
	},
	onPullDownRefresh() {
		this.modifyInfo();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	}
};
</script>

<style lang="scss" scoped>
.content {
	/deep/.u-select__body {
		height: 350rpx !important;
	}

	.popularityRanking {
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx 0 30rpx;

		image {
			width: 28rpx;
			height: 16rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}

		text {
			height: 23rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
			font-family: 'Microsoft YaHei', 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}

	.shop {
		padding: 31rpx 31rpx 0 31rpx;

		.name {
			height: 34rpx;
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #f8f8f8;
			margin-bottom: 20rpx;
		}

		.info {
			width: 690rpx;

			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;

			.top1 {
				display: flex;

				.left {
					width: 201rpx;
					height: 241rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					width: 430rpx;

					.right1 {
						height: 30rpx;
						line-height: 30rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 19rpx;

						view {
							height: 30rpx;
							font-size: 30rpx;
							font-family: 'Microsoft YaHei', 'Microsoft YaHei',
								PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						image {
							width: 90rpx;
							height: 30rpx;
						}
					}

					.right2 {
						height: 23rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei', 'Microsoft YaHei',
							PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 19rpx;

						display: flex;
						justify-content: space-between;
					}

					.right3 {
						height: 23rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei', 'Microsoft YaHei',
							PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 19rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 47rpx;
						.text {
							width: 240rpx;
							text-align: center;
							height: 35rpx;
							white-space: nowrap; /* 规定文本是否折行 */
							overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
							text-overflow: ellipsis;
						}
					}

					.right4 {
						margin-bottom: 11rpx;
						display: flex;
						justify-content: space-between;
						text {
							display: inline-block;
							text-align: center;
							color: #fefefe;
						}

						text:nth-child(1) {
							width: 136rpx;
							height: 40rpx;
							line-height: 40rpx;

							background: linear-gradient(
								180deg,
								#ff6494 0%,
								#ffa86a 100%
							);
							border-radius: 5rpx;
							margin-right: 20rpx;
						}

						// text:nth-child(2) {
						// 	width: 80rpx;
						// 	height: 40rpx;
						// 	line-height: 40rpx;
						// 	background: linear-gradient(180deg, #ff6494 0%, #ffa86a 100%);
						// 	border-radius: 5rpx;
						// 	margin-right: 100rpx;
						// }

						text:nth-child(2) {
							width: 85rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #ff0000;
							border-radius: 20rpx;

							font-size: 24rpx;
							font-family: 'Microsoft YaHei', 'Microsoft YaHei',
								PingFang SC;
							font-weight: bold;
							color: #fefefe;
						}
					}

					.right5 {
						height: 34rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.view {
							height: 34rpx;
							display: flex;
							align-items: center;
							text {
								height: 34rpx;
								line-height: 34rpx;
								font-size: 20rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}
							image {
								width: 27rpx;
								height: 27rpx;
								margin: 0 7rpx;
							}
						}
						.view1 {
							width: 70rpx;
							height: 40rpx;
							line-height: 40rpx;

							text-align: center;
							background: #ff0000;
							border-radius: 20rpx;

							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: bold;
							color: #fefefe;
						}
					}
				}
			}

			.button {
				.name {
					width: 118rpx;
					height: 28rpx;
					font-size: 29rpx;
					font-family: 'Microsoft YaHei', 'Microsoft YaHei',
						PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 28rpx;
				}

				.shuxian {
					width: 120rpx;
					height: 8rpx;
					background: linear-gradient(90deg, #ffa73d, #ffdd65);
					border-radius: 4rpx;
					margin-top: 10rpx;
				}

				.showPictures {
					display: flex;
					// justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 10rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						margin-right: 20rpx;
					}
					view:nth-child(3n) {
						image {
							margin-right: 0;
						}
					}
				}
			}
		}
	}

	.drpDn {
		padding: 30rpx;

		view {
			margin-bottom: 29rpx;
			font-size: 30rpx;
			font-family: 'Microsoft YaHei', 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #ffa73d;
		}

		.action {
			color: #ffa73d;
		}
	}
	.tankuang {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;

		.box {
			position: relative;
			width: 560rpx;
			height: 400rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 362rpx;

			.text {
				display: block;

				height: 85rpx;
				line-height: 85rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', 'Microsoft YaHei', PingFang SC;
				font-weight: 500;
				color: #333333;

				border-bottom: 2rpx solid #c7c7c7;
			}

			.info1 {
				display: flex;
				align-items: center;
				margin-top: 35rpx;
				margin-left: 50rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 31rpx;
				}

				text {
					font-size: 30rpx;
					font-family: 'Microsoft YaHei', 'Microsoft YaHei',
						PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.image {
				position: absolute;
				right: -60rpx;
				top: -60rpx;
				width: 71rpx;
				height: 71rpx;
			}
		}
	}

	.drpDn1 {
		.info {
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
			// border-bottom: 2rpx solid #b2b2b2;
		}

		.info1 {
			display: flex;

			.list11,
			.list22 {
				width: 50vw;

				text {
					display: block;
					padding: 10rpx;
					font-size: 30rpx;
					margin-left: 20rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
				}

				.action {
					color: #ffa73d;
				}
			}

			.list22 {
				background: #eeeeee;
			}
		}
	}
}
</style>
